/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['selector', '[data-theme="dark"]'],
  // 这里给出了一份 uni-app /taro 通用示例，具体要根据你自己项目的目录结构进行配置
  // 不在 content 包括的文件内，你编写的 class，是不会生成对应的css工具类的
  content: ['./index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
  // 其他配置项
  // ...
  corePlugins: {
    // 小程序不需要 preflight，因为这主要是给 h5 的，如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它
    preflight: false
  }, theme: {
    extend: {
      boxShadow: {
        'darkShadow': '0 0 30px 0px #f3eeee3d',
        'lightShadow': '0 0 10px 0 rgba(255, 255, 255, 0.5)'
      },
      colors: {
        'lightText': '#000000',
        'darkText': '#ffffff',
        'darkBg': '#000022',
        'lightBg': '#ffffff'
      },
      animation: {
        'moveWater-revert': 'moveWaterDroplets 10s  linear infinite reverse',
        'moveWater': 'moveWaterDroplets 10s  linear infinite normal'

      },
      keyframes: {
        moveWaterDroplets: {
          '0%': {

            // transform: 'translate(30%,50%)',
            borderRadius: '58% 42% 58% 42% / 55% 30% 70% 45%'
          },
          '25%': {
            // transform: 'translate(40%,60%)',

            borderRadius: '47% 53% 46% 54% / 46% 43% 57% 54% '
          },
          '50%': {
            // transform: 'translate(50%,70%)',
            borderRadius: '51% 49% 56% 44% / 42% 45% 55% 58% '
          },
          '75%': {
            // transform: 'translate(60%,60%)',
            borderRadius: '47% 53% 59% 41% / 41% 53% 47% 59% '
          },
          '100%': {
            // transform: 'translate(30%,50%)',

            borderRadius: '58% 42% 58% 42% / 55% 30% 70% 45% '
          },
        }
      }
    }
  }
}